import React, { useState } from 'react'
import { ResultPage, Card ,Tabs,Button,CalendarPickerView, Popup  } from 'antd-mobile'
import { Input } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import {useNavigate} from 'react-router-dom'
import dayjs from 'dayjs'
function Index() {
  let nav=useNavigate()
  let [startValue,setStartValue]=useState('')
  let [endValue,setEndValue]=useState('')
  let [time,setTime]=useState(false)
  let [date,setDate]=useState(dayjs().format('YYYY-MM-DD'))
  const huan=()=>{
    const temp=startValue
    setStartValue(endValue)
    setEndValue(temp)
  }
  return (
    <div>
      <ResultPage
      status=''
      title='购票系统'
      description='飞猪购票'
    >
      <ResultPage.Card style={{ height: 64, padding: 8 }}>
      <Tabs>
          <Tabs.Tab title='火车' key='fruits'>
          <div className='ko'>
          <Input
           style={{width:'100px'}}
          value={startValue}
          onChange={val => {
            setStartValue(val)
          }}
        />
        <LoopOutline  fontSize={36} onClick={()=>huan()}/>
        <Input
          value={endValue}
          style={{width:'100px'}}
          onChange={val => {
            setEndValue(val)
          }}
        />
          </div>
          <div>
            <span onClick={()=>setTime(true)}>{date}</span>
          </div>
          <Button block color='primary' size='large'style={{background:'orange'}} onClick={()=>nav(`/list?start=${startValue}&end=${endValue}&date=${date}&isSpeed=${false}`)}>
          搜索
        </Button>
          </Tabs.Tab>
          <Tabs.Tab title='高铁' key='vegetables'>
            高铁管理
          </Tabs.Tab>
          <Tabs.Tab title='飞机票' key='animals'>
            飞机管理
          </Tabs.Tab>
        </Tabs>
      </ResultPage.Card>
    </ResultPage>
    <Popup
        visible={time}
        onMaskClick={() => {
          setTime(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "40vh",
        }}
      >
        <CalendarPickerView
          onChange={(val) => {
            setDate(dayjs(val).format("YYYY-MM-DD"));
            setTime(false);
          }}
        />
      </Popup>
    </div>
  )
}

export default Index
